<template>
  <div>
    <div
      v-click-outside="handleClickOutside"
      style="padding: 50px; background-color: aqua"
    >
      <h2>测试点击外部元素指令</h2>
    </div>

    <br />
    <button @click="handleShowMessage">自定义消息插件</button>
    <br />
    <br />
    <button v-message="'自定义消息指令1'">自定义消息指令1</button>
    <br />
    <br />
    <button v-message="'自定义消息指令2'">自定义消息指令2</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "CustomDirectiveAndPlugins",
};
</script>

<script setup lang="ts">
// 局部注册指令
import { directive as vClickOutside } from "@/directives/click-outside";
import { directive as vMessage } from "@/plugins/Message";

function handleClickOutside() {
  console.log("点击了外部元素");
}

import { useMessage } from "@/plugins/Message";
function handleShowMessage() {
  useMessage().show("hello world!");
}
</script>
